<template>
    <div class="article-wrapper">
        <div class="article-header">
            <div class="back" @click="$router.back()"></div>

            <div class="author-info">
                <img src="https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image" alt="author-img">
                <span class="name">内裤大叔</span>
                <span class="watch">关注</span>
            </div>

            <div class="right">
                <div class="headset">
                    耳机
                </div>

                <router-link class="search" to="/search">
                    搜索
                </router-link>

                <div class="option">...</div>
            </div>
        </div>

        <div class="article-content"  >
            <h1 class="title">
               《最后生还者》重置版登顶销量TOP1 索尼是如何把"冷饭"越炒越香的 
            </h1>

            <div class="author">
                <img src="https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image" alt="author-img">
                
                <div class="info">
                    <span class="name">内裤大叔</span>
                    <span class="date">2022-10-02 20:22</span>
                </div>

                <button>关注</button>
            </div>

            <p class="content">
                testtesttesttesttesttesttest
                testtesttesttesttesttesttest
                testtesttesttesttesttesttest
                testtesttesttesttesttesttest
                testtesttesttesttesttesttesttesttest

                testtesttesttesttesttesttesttesttesttest
            </p>

            <div id="review">
                <div class="review-header">
                    <h1>评论 43</h1>

                    <span>15 赞</span>
                    <span class="line"></span>
                    <span>1 转发</span>
                </div>

                <div class="review-content">
                    <ReviewCard 
                        v-for="review of reviews" 
                        :key="review.id" 
                        :review="review"
                        @showReplyPage="showReplyPage"
                        class="review-card">
                    </ReviewCard>
                </div>
            </div>
        </div>

        <div class="article-footer">
            <div class="write-review">
                <input type="text" placeholder="写评论...">
            </div>

            <div class="right">
                <div>43评论</div>
                <div>收藏</div>
                <div>点赞</div>
            </div>
        </div>

        <ReplyPage 
            v-show="isShowReplyPage" 
            @close="isShowReplyPage=false">
        </ReplyPage>
    </div>
</template>

<script>
import ReviewCard from "@/components/ReviewCard";
import ReplyPage from "@/components/ReplyPage";

export default {
    name: 'Article',
    data () {
        return {
            reviews: [
                {
                    id: 1,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '你把我灌醉2333333',
                    like: 5,
                    content: '炒冷饭可以，得做点新游戏出来，这个时代产品太少',
                    replyCount: 5,
                    date: '9-25'
                },
                {
                    id: 2,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '活的就是心态',
                    like: 6,
                    content: '唯独ps5玩这个游戏头晕想吐',
                    replyCount: 2,
                    date: '9-26'
                },
                {
                    id: 3,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '飘香小鸭子',
                    like: 2,
                    content: '这款游戏 以后会登上PS4 吗？',
                    replyCount: 5,
                    date: '9-26'
                }
            ],
            isShowReplyPage: false
        }
    },
    methods: {
        showReplyPage () {
            this.isShowReplyPage = true
        }
    },
    components: {
        ReviewCard,
        ReplyPage
    }
}
</script>

<style lang="less" scoped>
.article-wrapper{
    .article-header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        height: 50px;
        background-color: #fff;

        .back{
            width: 40px;
            height: 50px;
            position: relative;
        }

        .back::after{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(-45deg);
            display: block;
            content: "";
            width: 12px;
            height: 12px;
            border-top: 2px solid black;
            border-left: 2px solid black;
        }

        .author-info{
            margin-right: auto;
            display: flex;
            align-items: center;
            column-gap: 8px;
            img{
                height: 28px;
                width: 28px;
                border-radius: 50%;
            }

            .name{
                font-size: 14px;
                font-weight: 800;
            }

            .watch{
                font-size: 14px;
                font-weight: 800;
                color: @font-red-d6;
            }
        }

        .right{
            margin-right: 10px;
            display: flex;
            align-items: center;
            column-gap: 15px;

            font-size: 14px;

            .option{
                font-size: 30px;
                transform: translateY(-24%);
            }
        }
    }

    .article-content{
        padding: 50px 20px 46px;
        .title{
            font-size: 21px;
        }

        .author{
            margin: 15px 0;
            display: flex;
            align-items: center;
            img{
                height: 35px;
                width: 35px;
                border-radius: 50%;
            }

            .info{
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                .name{
                    font-size: 14px;
                }
                .date{
                    font-size: 14px;
                    color: @font-grey-99;
                }
            }

            button{
                margin-left: auto;
                width: 60px;
                height: 30px;
                color: #fff;
                background-color: @font-red-f8;
                outline: none;
                border: none;
                border-radius: 3px;
            }
        }

        #review{
            margin-top: 20px;
            .review-header{
                display: flex;
                align-items: center;
                h1{
                    font-size: 16px;
                    font-weight: bolder;
                    margin-right: auto;
                }

                span{
                    font-size: 12px;
                    color: @font-grey-99;
                }
                .line{
                    margin: 0 8px;
                    transform: scaleX(.5);
                    width: 1px;
                    height: 10px;
                    background-color: @font-grey-99;
                }
            }

            .review-content .review-card{
                margin-top: 15px;
            }
        }
    }

    .article-footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        padding: 8px 0 8px 15px;
        height: 30px;
        box-sizing: content-box;
        background-color: #fff;
        .write-review{
            input{
                width: 180px;
                height: 30px;
                padding-left: 20px;
                padding-top: 3px;
                background-color: @background-grey-f2;
                border-radius: 20px;
                outline: none;
                border: none;
            }
        }

        .right{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;

            font-size: 14px;
            color: @font-grey-99;
        }
    }
}
</style>